<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('修改党员组织关系变动')" />
</head>
<body class="gray-bg">
	
	<div class="wrapper wrapper-content animated fadeInRight">
		<div class="row">
			<div class="col-sm-12">
				<div class="ibox float-e-margins">
					<div class="ibox-title">
						<h5>修改党员组织关系变动</h5>
					</div>
					<div class="ibox-content">
						<form class="form-horizontal m" id="form-change-edit" th:object="${partyRelationshipChange}">
							<input name="id" th:field="*{id}" type="hidden">
							<div class="form-group">
								<label class="col-sm-3 control-label">关联党员：</label>
								<div class="col-sm-8">
									<div class="input-group">
										<input type="hidden" name="memberId" id="memberId" th:field="*{memberId}">
										<input class="form-control" type="text" id="memberName" readonly required>
										<span class="input-group-btn">
											<button type="button" class="btn btn-primary" onclick="selectPartyMember()"><i class="fa fa-search"></i> 选择</button>
										</span>
									</div>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">变动类型：</label>
								<div class="col-sm-8">
									<select name="changeType" th:field="*{changeType}" class="form-control" required>
										<option value="1">转入</option>
										<option value="2">转出</option>
										<option value="3">校内调动</option>
										<option value="4">休学</option>
										<option value="5">复学</option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">原组织：</label>
								<div class="col-sm-8">
									<input name="sourceOrg" th:field="*{sourceOrg}" class="form-control" type="text" required>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">目标组织：</label>
								<div class="col-sm-8">
									<div class="input-group">
										<input type="hidden" name="targetOrg" id="targetOrgId" th:value="*{targetOrg}">
										<input class="form-control" type="text" id="targetOrgName" readonly required>
										<span class="input-group-btn">
											<button type="button" class="btn btn-primary" onclick="selectDept()"><i class="fa fa-search"></i> 选择</button>
										</span>
									</div>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">变动日期：</label>
								<div class="col-sm-8">
									<input name="changeDate" th:field="*{changeDate}" class="form-control" type="date" required>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">变动原因：</label>
								<div class="col-sm-8">
									<textarea name="reason" th:field="*{reason}" class="form-control"></textarea>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">经办人：</label>
								<div class="col-sm-8">
									<input name="handler" th:field="*{handler}" class="form-control" type="text" required>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">备注：</label>
								<div class="col-sm-8">
									<textarea name="remark" th:field="*{remark}" class="form-control"></textarea>
								</div>
							</div>
							<div class="form-group">
								<div class="form-control-static col-sm-offset-9">
									<button type="submit" class="btn btn-primary">提交</button>
									<button type="button" class="btn btn-danger" onclick="closeItem()">关闭</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<th:block th:include="include :: footer" />
	
	<script type="text/javascript">
		var prefix = ctx + "system/partymember/change";
		
		$(function() {
			// 页面加载时显示已选择的党员和目标组织名称
			showSelectedInfo();
		});
		
		$("#form-change-edit").validate({
			rules: {
				memberId: {
					required: true
				},
				sourceOrg: {
					required: true,
					maxlength: 100
				},
				targetOrgId: {
					required: true
				},
				handler: {
					required: true,
					maxlength: 50
				}
			},
			messages: {
				memberId: {
					required: "请选择关联党员"
				},
				sourceOrg: {
					required: "请输入原组织",
					maxlength: "原组织不能超过100个字符"
				},
				targetOrgId: {
					required: "请选择目标组织"
				},
				handler: {
					required: "请输入经办人",
					maxlength: "经办人不能超过50个字符"
				}
			},
			submitHandler: function(form) {
				$.operate.save(prefix + "/edit", $('#form-change-edit').serialize());
			}
		});
		
		// 显示已选择的党员和目标组织名称
		function showSelectedInfo() {
			var memberId = $("#memberId").val();
			var targetOrgId = $("#targetOrgId").val();
			
			// 获取党员信息
			if (memberId) {
				$.ajax({
					url: ctx + "system/partymember/member/list",
					type: "POST",
					data: {id: memberId},
					success: function(result) {
						if (result.rows && result.rows.length > 0) {
							$("#memberName").val(result.rows[0].name);
						}
					}
				});
			}
			
			// 获取部门信息
			if (targetOrgId) {
				$.ajax({
					url: ctx + "system/dept/list",
					type: "POST",
					data: {deptId: targetOrgId},
					success: function(result) {
						if (result.rows && result.rows.length > 0) {
							$("#targetOrgName").val(result.rows[0].deptName);
						}
					}
				});
			}
		}
		
		// 选择党员
		function selectPartyMember() {
			layer.open({
				type: 2,
				title: "选择党员",
				area: ['800px', '500px'],
				content: ctx + "system/partymember/member/select",
				btn: ['确定', '关闭'],
				yes: function(index, layero) {
					var iframeWin = layero.find('iframe')[0];
					var data = iframeWin.contentWindow.getSelected();
					if (data && data.length > 0) {
						$("#memberId").val(data[0].id);
						$("#memberName").val(data[0].name);
					}
					layer.close(index);
				}
			});
		}
		
		// 选择部门
		function selectDept() {
			layer.open({
				type: 2,
				title: "选择目标组织",
				area: ['300px', '500px'],
				content: ctx + "system/dept/tree",
				btn: ['确定', '关闭'],
				yes: function(index, layero) {
					var iframeWin = layero.find('iframe')[0];
					var data = iframeWin.contentWindow.selectDeptTree();
					if (data && data.length > 0) {
						$("#targetOrgId").val(data[0].id);
						$("#targetOrgName").val(data[0].name);
					}
					layer.close(index);
				}
			});
		}
		
		function closeItem() {
			var index = parent.layer.getFrameIndex(window.name);
			parent.layer.close(index);
		}
	</script>
</body>
</html>